<template>
  <div class="app">
    <!--<img src="./assets/logo.png">-->
    <!--<router-view></router-view>-->
    <v-header :seller = "seller"></v-header> <!--通过seller属性将seller的内容传递给子组件-->
    <ul class="tab border-1px">
      <li class="tab-item">
        <router-link to="/goods">商品</router-link>
      </li>
      <li class="tab-item">
       <router-link to="/ratings">评价</router-link>
      </li>
      <li class="tab-item">
       <router-link to="/seller">商家</router-link>
      </li>
    </ul>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>
</template>

<script>
  import header from 'components/header/header';
  const ERR_OK = 0;
export default {
  data () {
    return {
        seller:{}
    }
  },
  created () {
    this.$http.get('/api/seller').then( (res) => {
        res = res.body;
        if ( res.errno === ERR_OK) {
          this.seller = res.data;
        }
    }) 
  },
  components: {
    'v-header': header
  }
};
</script>

<style lang="scss" scoped>
  @import "./common/scss/mixin.scss";
  .app {
    .tab {
      width: 100%;
      display: flex;
      height: 40px;
      line-height:40px;
      @include border-1px(rgba(7,17,27, 0.3));
     /*/ border-bottom: 1px solid rgba(7,17,27, 0.1);*/
      .tab-item {
        flex: 1;
        text-align: center;
        a {
          display: block;
          font-size: 14px;
          color: rgb(77,85,93);
        }
        .router-link-active {
          color: rgb(240,20,20);
        }
      }
    }
  }
</style>